<template>
  <div class="box">
    <div class="content">
      <product-top />
      <!-- 产品申请流程 -->
      <div class="applyFlow">
        <!-- 顶部标签 -->
        <div class="title">
          <h3 :class="{ active: row == 1 }" @click="apply">产品申请</h3>
          <h3 :class="{ active: row == 2 }" @click="row = 2">产品详情</h3>
        </div>
        <!-- 申请流程 -->
        <div class="apply-flow" v-if="row == 1">
          <!-- <transition name="fade" mode="out-in"> -->
          <router-view></router-view>
          <!-- </transition> -->
        </div>

        <!-- 产品详情页 -->
        <div class="details" v-else>
          <!-- <transition name="fade" mode="out-in"> -->
          <div>
            <div v-for="(item, index) in data" :key="index">
              <div class="titles">
                <img src="@/assets/PC/金融服务/组41.png" alt="" />
                <h3>{{ item.module }}</h3>
              </div>
              <p v-html="item.content"></p>
            </div>
          </div>
          <!-- </transition> -->
          <div class="btn">
            <h1 @click="apply()">立即申请</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductDetail } from "@/utils";
import ProductTop from "@/components/ProductTop.vue";
export default {
  components: { ProductTop },
  data() {
    return {
      procedureId: "",
      productcode: null,
      row: 1,
      data: null, //产品详情状态变量
    };
  },
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.procedureId = localStorage.getItem("productcodeId");
    this.productcode = localStorage.getItem("productcode");
    // 判断路由地址中是否又row字段
    if (this.$route.query.row) {
      this.row = this.$route.query.row;
    }
    this.getProductDetail();
  },
  methods: {
    // 获取产品信息
    async getProductDetail() {
      let a = [];
      let { data } = await getProductDetail(this.procedureId);
      for (let i = 0; i < data.length; i++) {
        if (data[i].module != "申请资料") {
          a.push(data[i]);
        }
      }
      this.data = a;
    },

    // 点击申请
    apply() {
      this.row = 1;
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .content {
    margin: 0 auto;
    position: relative;
    width: 1100px;
  }
}

// 申请流程
.applyFlow {
  flex: 1;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
  // border-radius: 6px;
  margin-top: 10px;
  @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    margin-top: 25px;
  }
  overflow: hidden;
  .title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    z-index: 99;
    margin-top: 10px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      margin-top: 15px;
    }
    h3 {
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        margin-top: 10px;
      }
      height: 32px;
      width: 75px;
      line-height: 28px;
      text-align: center;
      box-sizing: border-box;
      margin-left: 35px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #838383;
      cursor: pointer;
      &.active {
        box-sizing: border-box;
        border-bottom: 2px solid #0a7be0;
        color: #0a7be0;
      }
    }
  }
  .apply-flow {
    height: 100%;
  }
}
// 产品详情
.details {
  box-sizing: border-box;
  padding: 10px 40px;
  width: 100%;
  margin-top: 10px;
  .titles {
    position: relative;
    width: 100%;
    height: 20px;
    margin: 10px 0 10px 0;
    img {
      position: absolute;
      top: 11px;
      width: 122px;
      height: 9px;
    }
    h3 {
      position: absolute;
      left: 0px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1a1a1a;
    }
  }
  p {
    font-size: 14px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #4d4d4d;
    line-height: 35px;
    // margin-top: 10px;
    text-indent: 2em;
  }
}
.btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  color: #fff;
  h1 {
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 34px;
    background: #0a7be0;
    border-radius: 4px;
  }
}
.details::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #fff;
}

.details::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: rgba(36, 143, 172, 0.5);
}
// 切换过渡
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
  transition: opacity 0.5s;
}
// 弹出框
.dialog-center {
  width: 90%;
  text-align: center;
  p {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 300;
    color: #4d4d4d;
    line-height: 34px;
    text-indent: 20px;
    margin-bottom: 5px;
  }
  .p {
    width: 900px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #4d4d4d;
    line-height: 34px;
    text-indent: 20px;
    margin-bottom: 5px;
    margin-left: 18px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 121px;
    height: 31px;
    color: #48a0b8;
    border: 1px solid #56b1ca;
    border-radius: 4px;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #0a7be0;
    z-index: 9999;
  }
}
.abc {
  width: 368px;
  .el-select {
    width: 100%;
  }
}
</style>
